<template>
    <textarea ref="code-container" v-bind:value="value"></textarea>
  </template>
  
  
  <script>
    import CodeMirror from 'codemirror'
    import './formatting'
    import 'codemirror/mode/xml/xml.js'
    import 'codemirror/addon/hint/xml-hint.js'
    import 'codemirror/lib/codemirror.css'
    import 'codemirror/theme/material.css'
    
  
  
    let editor = CodeMirror.EditorFromTextArea
  
  
    function autoFormatSelection() {
      // 选中所有行
      CodeMirror.commands['selectAll'](editor)
      // 获取被选中的开始行号和结束行号
      let range = {
        from: editor.getCursor(true),
        to: editor.getCursor(false)
      }
      // 基于选中的行号进行格式化
      editor.autoFormatRange(range.from, range.to)
      // 取消选择, 并去到第一行
      CodeMirror.commands["goDocStart"](editor)
    }
  
  
    export default {
      name: 'XmlCodeMirror',
      props: {
        value: {
          type: String,
          require: true
        },
        readOnly: {
          type: Boolean,
          default: true
        }
      },
      mounted() {
        if (!editor) {
          editor = CodeMirror.fromTextArea(
            this.$refs['code-container'],
            {
              lineWrapping: true,
              mode: 'application/xml', // HMTL混合模式
              lineNumbers: true, // 是否显示行号
              lint: true, // 是否高亮显示代码
              theme: 'material', // 主题，需要配合上方 import 的 css
              readOnly: this.readOnly // 是否只读
            }
          )
          editor.setSize('100%', '100%')
        } else {
          editor.setValue(this.value)
        }
        autoFormatSelection()
      },
      watch: {
        value: (val, oldVal) => {
          editor.setValue(val)
          autoFormatSelection()
        }
      }
    }
  </script>
  